<template>
  <div class="setting">
    <h2>设置</h2>
    <form action="">
      <div>
        <div class="set">
          <div class="set-item">
            <h4>私信提醒</h4>
            <div>
              <input type="radio" name="sixin" id="all" checked>
              <label for="all">所有人</label>
            </div>
            <div>
              <input type="radio" name="sixin" id="focus">
              <label for="focus">关注的人</label>
            </div>
          </div>
          <div class="set-item">
            <h4>通知</h4>
            <div class="collected">
              <input type="checkbox" name="notice" id="collected" checked>
              <label for="collected">文章被收藏</label>
            </div>
            <div>
              <input type="checkbox" name="notice" id="liked" checked>
              <label for="liked">收到赞</label>
            </div>
            <div>
              <input type="checkbox" name="notice" id="new" checked>
              <label for="new">新粉丝</label>
            </div>
          </div>
          <div class="set-item">
            <h4>收藏的文章</h4>
            <div>
              <input type="radio" name="collect" id="every" value="" checked>
              <label for="every">所有人可见</label>
            </div>
            <div>
              <input type="radio" name="collect" id="mine" value="">
              <label for="mine">仅自己可见</label>
            </div>
          </div>
        </div>
        <!-- 更改密码 -->
        <div class="changePwd">
          <h4>更改密码</h4>
          <label for="current">当前密码</label>
          <input type="password" id="current" placeholder="当前密码">
          <label for="new">新的密码</label>
          <input type="password" id="new" placeholder="新的密码">
          <label for="confirm">确认密码</label>
          <input type="password" id="confirm" placeholder="确认密码">
        </div>
      </div>
      <input type="submit" value="保 存 设 置">
    </form>
  </div>
</template>

<script>
  export default {
    name: 'Setting'
  }
</script>

<style scoped>
  h2 {
    color: #86a3b1;
    margin-bottom: 40px;
    margin-left: 110px;
  }

  form>div {
    display: flex;
    justify-content: space-around;
  }

  .set-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
  }

  h4 {
    margin-bottom: 15px;
  }

  .set-item>div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  input[type=radio],
  input[type=checkbox] {
    overflow: hidden;
    width: 15px;
    height: 15px;
    border: 1px solid #86a3b1;
    border-radius: 3px;
    cursor: pointer;
    -webkit-appearance: none;
    margin-right: 5px;
  }

  input[type=radio] {
    border-radius: 100%;
  }

  input:checked {
    background: url('~assets/img/checked.png') no-repeat center center;
    background-size: 15px 15px;
  }

  input[type=checkbox] {
    background-size: 20px 20px;
  }

  .changePwd {
    display: flex;
    flex-direction: column;
  }

  input[type=password] {
    width: 300px;
    height: 40px;
    line-height: 30px;
    border: 1px solid #E0E0FF;
    border-radius: 5px;
    font-size: 15px;
    margin: 10px 0 20px;
    padding: 0 10px;
    box-shadow: 1px 1px 5px #E0E0FF;
  }

  input[type=submit] {
    width: 200px;
    height: 50px;
    line-height: 28px;
    outline: none;
    border: 0;
    border: 2px solid #86a3b1;
    border-radius: 30px;
    background-color: #86a3b1;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: 1px 1px 5px #86a3b1;
    cursor: pointer;
    margin-left: 330px;
  }

  input[type=submit]:hover {
    background-color: transparent;
    color: #86a3b1;
  }

  /* input的placeholder样式 */
  ::-webkit-input-placeholder { /* WebKit browsers */
    color: #9CA3AF;
    font-size: 13px;
  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #9CA3AF;
    font-size: 13px;
  }

  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #9CA3AF;
    font-size: 13px;
  }
</style>